import React, { useEffect, useState, useContext } from 'react'
import { Button, Menu, Descriptions, Table } from 'antd';
import { CloseCircleOutlined } from '@ant-design/icons'
import FxqhContext from '../../SpecialMap/fxqhContext';
import biaoge from '../../../Zhpg/Yxfx/YxfxXq/biaoge';
import FxqyApi from '../../../../../../../utils/apis/FxqyApi';
import ScrollTable from '../../../../../../common/ScrollTable';
import json5 from 'json5';


export default function DisasterDetails(props) {

    //const { rowData, targetTemplate } = props.dataObj;
    const { rowData, targetTemplate, leftKey } = useContext(FxqhContext);
    const [data, setData] = useState('0');
    // console.log('data',data)
    // if(data?.xq){
    //     const dataXq=JSON.parse(data?.xq);
    // }
    const dataXq = data?.xq ? JSON.parse(data?.xq) : {};
    // console.log('dataXq', JSON.parse(data?.xq))

    //rowData：灾害点坐标
    // console.log("targetTemplate",  Object.keys(targetTemplate).map(e => {
    //     return {
    //         key: e,
    //         value: targetTemplate[e]
    //     }
    const [loading, setLoading] = useState()
    useEffect(() => {
        setLoading(true)
        console.log('leftKey', leftKey, targetTemplate);
        if (targetTemplate) {
            if (leftKey === '1') {
                FxqyApi.dzId(targetTemplate).then(resp => {


                    setData(resp?.rows?.[0])
                    //console.log('targetTemplate', resp);
                }).finally(e => {
                    setLoading(false)
                })
            } else {
                FxqyApi.yhdjId(targetTemplate).then(resp => {


                    setData(resp?.rows?.[0])
                    //console.log('targetTemplate', resp?.rows?.[0]);
                }).finally(e => {
                    setLoading(false)
                })
            }
        }
    }, [targetTemplate, leftKey]);

    const [menuKey, setMenuKey] = useState('1');

    //鼠标移动
    const [position, setPosition] = useState({ x: 0, y: 0 });
    const [isDragging, setIsDragging] = useState(false);
    const [mouseOffset, setMouseOffset] = useState({ x: 0, y: 0 });

    //组件初始位置居中
    useEffect(() => {
        // 获取页面的宽度和高度
        const pageWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        const pageHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

        // 计算组件的初始位置
        const initialX = (pageWidth - 600) / 2;  // 假设组件宽度为 200px
        const initialY = (pageHeight - 500) / 2; // 假设组件高度为 200px

        setPosition({ x: initialX, y: initialY });
    }, []);

    //组件移动逻辑
    const handleMouseDown = (event) => {
        event.preventDefault();
        setIsDragging(true);
        setMouseOffset({
            x: event.clientX - position.x,
            y: event.clientY - position.y,
        });
    };
    const handleMouseUp = () => {
        setIsDragging(false);
    };
    //
    const handleMouseMove = (event) => {
        if (!isDragging) return;
        setPosition({
            x: event.clientX - mouseOffset.x,
            y: event.clientY - mouseOffset.y,
        });
    };
    const btnd = biaoge();
    // const dataXq = JSON.parse(data?.xq)
    // console.log('dataXq',dataXq)
    // console.log('targetTemplate', targetTemplate)
    // console.log('data', data)

    // const shuju = data ? data : targetTemplate
    console.log('shuju', data)
    // const btndCheck = btnd[`${targetTemplate?.yhlx}`] ? btnd[`${targetTemplate?.yhlx}`]: btnd[`${targetTemplate?.yhlb}`]

    return (
        <div>
            <div style={{
                position: 'absolute',
                top: position.y,
                left: position.x,
                //cursor: 'move',
                zIndex: 5,
                width: 600,
                height: 400,
                backgroundColor: "rgba(15, 29, 38,0.9)",
                border: '1px solid rgba(255, 255, 255, 0.5)'
            }}
                onMouseDown={handleMouseDown}
                onMouseUp={handleMouseUp}
                onMouseMove={handleMouseMove}
            >
                <div><Menu mode='horizontal' items={[
                    {
                        label: '灾害详情',
                        key: '1',
                    },
                    {
                        label: '监测数据',
                        key: '2',
                    },
                    {
                        label: '研判数据',
                        key: '3',
                    },
                    {
                        label: '报警数据',
                        key: '4',
                    },
                    {
                        label: '重点防护目标',
                        key: '5',
                    }
                ]}
                    onClick={e => {
                        setMenuKey(e.key);
                    }}>

                </Menu>
                    <Button icon={<CloseCircleOutlined />} type={"text"} style={{
                        position: "absolute",
                        top: 10,
                        right: 10
                    }} onClick={e => props.onClose?.()}></Button>
                </div>
                {menuKey === "1" && <div style={{
                    display: 'flex',
                    justifyContent: 'center',
                    //alignItems: 'center',
                    width: '100%',
                    // 假设要铺满整个视口高度
                }}>
                    <div style={{
                        position: 'absolute',
                        width: 550,
                        height: 350,
                        backgroundColor: 'rgba(15, 29, 38, 0.1)',
                        //border: '1px solid rgba(255, 255, 255, 0.5)'
                    }}>
                        {data && <Table
                            loading={loading}
                            scroll={{ y: 270 }}
                            pagination={false}
                            columns={[{
                                title: '指标名称',
                                dataIndex: "key",
                                key: 'key'

                            },
                            {
                                title: '值',
                                dataIndex: "value",
                                key: 'value'
                            }
                                ,]}
                            dataSource={
                                Object.keys(data).map((key, index) => {
                                    if (key === '0') {
                                        /* 
                                        --防止数据未请求完成就加载表格数据报错
                                        */
                                    } else {
                                        if (leftKey === '1') {
                                            if (btnd?.['地震_风险区划_本系统字段'][key]) {
                                            return ({
                                                key: btnd?.['地震_风险区划_本系统字段'][key],
                                                value: data[key]
                                            })}
                                            
                                        } else {


                                            if (btnd?.[`${data?.yhlb}`]?.[key]) {
                                                return ({
                                                    key: btnd?.[`${data?.yhlb}`][key],
                                                    value: data[key]
                                                })
                                            }
                                        }
                                    }
                                    return null;
                                }).filter(e => e)//过滤掉空行

                            }
                        />}
                    </div>
                </div>}
                {menuKey === "2" && <div style={{
                    display: 'flex',
                    justifyContent: 'center',
                    //alignItems: 'center',
                    width: '100%',
                    // 假设要铺满整个视口高度
                }}>
                    <div style={{
                        position: 'absolute',
                        width: 550,
                        height: 350,
                        backgroundColor: 'rgba(15, 29, 38, 0.1)',
                        //border: '1px solid rgba(255, 255, 255, 0.5)'
                    }}>
                        {
                            data && <Table
                                loading={loading}
                                scroll={{ y: 270 }}
                                pagination={false}
                                columns={[{
                                    title: '指标名称',
                                    dataIndex: "key",
                                    key: 'key'

                                },
                                {
                                    title: '数量',
                                    dataIndex: "value",
                                    key: 'value'
                                }
                                    ,]}
                                dataSource={
                                    Object.keys(dataXq).map((key, index) => {
                                        if (key === '0' && key === '1') {
                                            /* 
                                            --防止数据未请求完成就加载表格数据报错
                                            */
                                        } else {
                                            if (btnd[`${dataXq?.Yhlx}`]?.[key]) {
                                                return ({
                                                    key: btnd?.[`${dataXq?.Yhlx}`][key],
                                                    value: dataXq[key]
                                                })
                                            }
                                        }
                                        return null;
                                    }).filter(e => e)//过滤掉空行

                                }
                            />
                        }
                    </div>
                </div>}
                {menuKey === "3" && <div style={{
                    display: 'flex',
                    justifyContent: 'center',
                    //alignItems: 'center',
                    width: '100%',
                    // 假设要铺满整个视口高度
                }}>
                    <div style={{
                        position: 'absolute',
                        width: 550,
                        height: 350,
                        backgroundColor: 'rgba(15, 29, 38, 0.1)',
                        //border: '1px solid rgba(255, 255, 255, 0.5)'
                    }}>
                        此次 灾害 {data?.yhmc}，诱发因素为 暴雨；地震。威胁户数0户，威胁人数0人，威胁财产约0.0万元<br />
                        10 公里范围内共影响 地下矿山 1 处， 医疗卫生机构 1 处。<br />
                        10 公里范围内 救援队伍 1 个。<br />
                        10 公里范围内 应急避难场所 2 个。<br />
                        10 公里范围内 物资储备库 0 个。<br />
                    </div>
                </div>}

            </div>

        </div>
    )
}
